<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui" >

    <h:body>

        <h:form id="formPublicados">
            <p:dataGrid value="#{misPublicaciones.publicacionesDto}" var="item" columns="1" 
                        styleClass="itemsTable" id="grid" rowIndexVar="row" paginator="true" 
                        paginatorPosition="bottom" paginatorAlwaysVisible="false"
                        emptyMessage="No hay artículos publicados." >
                <p:column>

                    <div class="artContenedor" >
                        <div class="artImagen" >
                            <h:graphicImage value="/image?id=#{item.imagenId}" 
                                            style="max-width: 120px; max-height: 100px"
                                            rendered="#{item.imagenId != -1}" />
                            <h:graphicImage value="#{resource['images:noImage.png']}" 
                                            style="max-width: 120px; max-height: 100px"
                                            rendered="#{item.imagenId == -1}" />
                        </div>
                        <div class="artDescripcion">
                            <h5>
                                <h:link value="#{item.titulo}" outcome="/vistas/mostrarPublicacion" >
                                    <f:param name="id" value="#{item.id}" />
                                </h:link>
                            </h5>
                            <div class="artDescContenido">
                                <h:outputText value="#{item.ciudad}, #{item.provincia}" />
                                <br/>
                                <h:outputText value="Cantidad: #{item.cantidad}" />
                            </div>
                            <div class="accionPrincipal">
                                <p:button value="Destacar" outcome="/vistas/usuario/destacarPublicacion" 
                                          rendered="#{not item.destacada}" style="background: palegreen" >
                                    <f:param name="id" value="#{item.id}" />
                                </p:button>
                                <h:outputText value="¡Artículo Destacado!" rendered="#{item.destacada}" style="font-weight: bold; color: darkslateblue;" />
                            </div>
                        </div>  
                        <div class="artPrecio" >
                            <div class="accionesContenedor">
                                <div class="artAcciones">
                                    <p:button value="Editar" outcome="/vistas/usuario/modificarPublicacion" icon="ui-icon-pencil" >
                                        <f:param name="id" value="#{item.id}" />
                                    </p:button>
                                    <p:commandButton value="Eliminar" icon="ui-icon-close" onclick="eliminarPubDlg.show()" process="@this" >
                                        <f:setPropertyActionListener value="#{item.id}" target="#{misPublicaciones.publicacionId}" />
                                    </p:commandButton>
                                </div>
                            </div>

                            <h:outputLabel value="Precio:" styleClass="precioLabel" />
                            <br/>
                            <h:outputText value="$ #{item.precioDia}" styleClass="precio" />
                            <a onclick="manejarPopup(jQuery(this).parent('.artPrecio').find('.artPopup'), 'artPopup')" >
                                <p:commandButton type="button" icon="ui-icon-triangle-1-s" style="font-size: 11px"/>
                            </a>
                            <br/>
                            <h:outputText value="por dia" styleClass="precioLabel" />
                            <div class="artEstado" >
                                <h:outputText value="#{item.estado.toString()}" />
                            </div>
                            <div class="artPopup" style="display: none">
                                <h:panelGrid columns="2" style="text-align: left"  >
                                    <f:facet name="header" >
                                        <h:outputText value="Detalle de precios:" style="font-weight: bold; color: cornflowerblue" />
                                    </f:facet>
                                    <h:outputText value="$ #{item.precioHora}" styleClass="detPrecio" 
                                                  rendered="#{not empty item.precioHora}" />
                                    <h:outputLabel value="/Hora" styleClass="detPeriodo" 
                                                   rendered="#{not empty item.precioHora}" />
                                    <h:outputText value="$ #{item.precioDia}" styleClass="detPrecio" />
                                    <h:outputLabel value="/Día" styleClass="detPeriodo"/>
                                    <h:outputText value="$ #{item.precioSemana}" styleClass="detPrecio"
                                                  rendered="#{not empty item.precioSemana}" />
                                    <h:outputLabel value="/Semana" styleClass="detPeriodo" 
                                                   rendered="#{not empty item.precioSemana}" />
                                    <h:outputText value="$ #{item.precioMes}" styleClass="detPrecio" 
                                                  rendered="#{not empty item.precioMes}" />
                                    <h:outputLabel value="/Mes" styleClass="detPeriodo"
                                                   rendered="#{not empty item.precioMes}" />
                                </h:panelGrid>
                            </div>
                        </div>
                    </div>
                </p:column>
            </p:dataGrid>

            <p:dialog widgetVar="eliminarPubDlg" header="Eliminar publicación" modal="true" 
                      resizable="false" style="text-align: center;" >
                <p>
                    ¿Está seguro que desea eliminar esta publicación?
                </p>
                <br/>
                <f:facet name="footer" >
                    <p:commandButton value="Aceptar" action="#{misPublicaciones.borrarPublicacion}"
                                     oncomplete="eliminarPubDlg.hide()" ajax="false" >    
                    </p:commandButton>
                    <p:commandButton value="Cancelar" onclick="eliminarPubDlg.hide()" />
                </f:facet>


            </p:dialog>

        </h:form>

    </h:body>
</html>

